<template>
  <div ref="refWrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { debounce } from 'assets/js/utils.js'
export default {
  props: {
    probeType: {
      type: Number,
      default: 0,
    },
    pullUpLoad: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      bscroll: null,
    }
  },
  mounted() {
    this.bscroll = new BScroll(this.$refs.refWrapper, {
      // 0,1 不实时监测位置，2，监测，但不监测惯性滚动，3，监测并监测惯性滚动
      probeType: this.probeType,
      click: true,
      pullUpLoad: this.pullUpLoad,
    })

    // 监听滚动事件
    this.bscroll.on('scroll', (position) => {
      this.$emit('scroll', position)
    })

    // 监听上拉事件
    this.bscroll.on('pullingUp', () => {
      this.$emit('pullingUp')
    })
  },
  methods: {
    // 获得当前滑动到的位置
    getScrollNumForY() {
      const num = this.bscroll ? this.bscroll.y : 0
      return num
    },
    // 返回到头部的方法，外部 home组件来调用
    // 属性分别是，返回到的 x轴 y轴的位置，经过多少毫秒到顶部

    backToTop(x, y, time = 500) {
      this.bscroll.scrollTo(x, y, time)
    },
    // 一些情况下，图片加载成功事件触发过来后，scroll组件的bscroll对象还没有创建出来，导致调用 scrollRefresh 方法失败，
    // 通过这样判断后避免这样的情况，
    // 原理是 逻辑与的执行顺序是从左到右，如果第一项不存在，也就返回 undefined，也就是 false，就不在往下执行，避免调用 undefined 发生错误
    scrollRefresh() {
      this.bscroll && this.bscroll.refresh()
    },
    scrollFinishPullUp() {
      // 只有执行这个，上拉刷新事件才能再次执行
      this.bscroll && this.bscroll.finishPullUp()
    },
  },
}
</script>

<style lang="less" scoped></style>
